<template>
	<view style="height: 100vh;">
		<view style="position: fixed;z-index: 3;left: 19rpx;top: 100rpx;" @click="back">
			<u-icon name="arrow-left" size="50rpx" color="#FFFFFF"></u-icon>
		</view>
		<view style="position: absolute;z-index: 3;left: 0rpx;top: 180rpx;" class="rule"
			@click="skip('/pages/me/rule',true)">
			活动规则
		</view>

		<view style="position: relative;">
			<image
				:src="`${type?'https://xy.outletds.com/uploads/icon/ebg.png':'https://xy.outletds.com/uploads/icon/bg.png'}`"
				style="width: 100%;height: 100vh;" mode="widthFix"></image>
			<view class="main">
				<!-- <view class="btn" @click="skip(`/pages/index/home`)">
					查看附近小样机
				</view> -->
				<view class="schedule">
					<view class="schedule_list">
						<view class="flex flex-ai-c flex-jc-sb" style="background: #F9F9F9;height: 74rpx;">
							<view>奖励进度</view>
							<view class="flex flex-ai-c font-24" style="color: #999999;font-weight: 400;"
								@click="skip(`/pages/me/line_up_order?type=${type}`,true)">
								进度明细
								<u-icon name="arrow-right" size="24rpx"></u-icon>
							</view>
						</view>
						<view class="flex flex-jc-sb schedule_list_text">
							<view>
								<view class="price_c"><text>{{info.to_be_order}}</text>元</view>
								<view>待下单</view>
							</view>
							<view>
								<view class="price_c"><text>{{info.order_on_the_way}}</text>元</view>
								<view>在路上</view>
							</view>
							<view>
								<view class="price_c"><text>{{info.earned_order}}</text>元</view>
								<view>已获得</view>
							</view>
							<view>
								<view class="price_c"><text>{{info.invalid_order}}</text>元</view>
								<view>已失效</view>
							</view>
						</view>
					</view>
					<view class="flex flex-jc-sb flex-ai-c bottom" @click="skip(type?`/pages/wallet/withdrawal/withdrawal`:`/pages/me/withdrawal`,true)">
						<view><text
								style="font-weight: 500;color: #000;font-size: 30rpx;">可提现金额：</text><text>{{info.total_unsettled_income}}</text><text
								class="price_c">元</text></view>
						<u-icon name="arrow-right" size="28rpx"></u-icon>
					</view>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	import order from '@/api2/order.js';
	import { getRebatePanelDataApi } from '@/api/my.js'
	export default {
		data() {
			return {
				info: {},
				type: null
			}
		},
		onLoad(op) {
			if (op.type) {
				this.type = op.type
			}
			this.getRebatePanelData()
		},
		methods: {
			async getRebatePanelData() {
				let res
				if(this.type) {
					res = await getRebatePanelDataApi()
				}else {
					res = await order.getRebatePanelData()
				}
				
				this.info = res.data
			},
			back() {
				uni.navigateBack()
			},
			skip(url, flag) {
				if (!flag) {
					uni.switchTab({
						url: url
					})
				} else {
					uni.navigateTo({
						url: url
					})
				}
			}
		}
	}
</script>
<style lang="scss" scoped>
	.rule {
		// width: 128rpx;
		// height: 43rpx;

		background: rgba(0, 0, 0, 0.2);
		border-radius: 0 100rpx 100rpx 0rpx;
		font-size: 23rpx;
		color: #FFFFFF;
		line-height: 43rpx;
		padding: 5rpx 20rpx;
	}

	.main {
		position: absolute;
		bottom: 240rpx;
		width: 100%;
		z-index: 1;

		.bottom {
			padding: 0 30rpx;
			margin-top: 56rpx;
			height: 121rpx;
			background: #FFFFFF;
			border-radius: 8rpx;
		}

		.btn {
			width: 561rpx;
			height: 103rpx;
			background: linear-gradient(180deg, #FDFFEE 0%, #E7BF44 100%);
			border-radius: 52rpx;
			text-align: center;
			line-height: 103rpx;
			margin: 0 92rpx;
			font-size: 36rpx;
			font-weight: 500;
		}

		.schedule {
			margin: 56rpx 42rpx;

			.schedule_list {
				border-radius: 8rpx;
				background: #FFFFFF;

				.schedule_list_text {
					padding: 26rpx 30rpx;
					font-size: 22rpx;
					font-weight: 400;
					color: #666666;
				}
			}

			.schedule_list>view {
				padding: 0 30rpx;
			}
		}
	}

	text {
		color: #FA342C;
		font-size: 48rpx;
	}

	.price_c {
		color: #FA342C;
		font-size: 24rpx !important;
	}
</style>